<template>
  <!-- 大标题 -->
  <div style="height: 6vh;padding: 10px 20px;background-color: #fff">
    <span style="line-height: 60px;font-size: 20px;font-weight: bold">职位管理</span>
  </div>
  <!-- 搜索卡片 -->
  <el-card style="margin-top: 10px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="职位名称" style="width: 220px;">
        <el-input placeholder="请输入" v-model="searchPostForm.name" @keydown.enter="loadPost"></el-input>
      </el-form-item>
      <el-form-item label="职位状态" style="width: 290px;">
        <el-select placeholder="请选择" v-model="searchPostForm.status" @change="loadPost">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button round :icon="Refresh" type="info" @click="searchPostForm = {}">重置</el-button>
        <el-button type="primary" :icon="Search" @click="loadPost">查询</el-button>
      </el-form-item>
    </el-form>

  </el-card>
  <!-- 项目数据卡片 -->
  <el-card style="margin-top: 10px;">
    <el-form>
      <el-button style="float: right" :icon="Plus" type="primary" @click="beforeAddPost">新增职位</el-button>
    </el-form>
    <el-table :data="PostArr">
      <el-table-column label="职位名称" prop="postName" width="130" ></el-table-column>
      <el-table-column label="所在部门" prop="deptName" align="center" ></el-table-column>
      <el-table-column label="创建日期" prop="createTime" align="center" width="110"></el-table-column>
      <el-table-column label="职位状态" prop="dataState" align="center">
        <template #default="scope">
          <el-switch :active-value="'1'" :inactive-value="'0'" v-model="scope.row.dataState"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="职位说明" prop="remark"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button :icon="Edit" #>编辑</el-button>
          <el-button :icon="Delete" #>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新建项目弹窗(对话框) -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="padding: 40px;"
      destroy-on-close
  >
    <SimpleForm
        v-model="form"
        @submitSuccess="onSubmitSuccess"
        @cancel-form="dialogVisible = false"
        :form-config="addNurSingForm"
    />
  </el-dialog>

  <!-- 新建项目弹窗(对话框) -->
  <!--todo-->
</template>

<script setup>

import {Delete, Edit, Plus, Refresh, Search} from "@element-plus/icons-vue";
import {addNurSingForm} from "@/utils/formItemsConfig.js";
import SimpleForm from "@/components/SimpleForm/index.vue";
import SimplePagination from "@/components/SimplePagination/index.vue";
import {ref,onMounted} from "vue";
import {loadPostApi} from "@/api/system/SysPostApi.js";
import {loadDepttApi} from "@/api/system/SysDeptApi.js";
import qs from "qs";

const total = ref(0);

//定义变量控制弹窗是否出现
const dialogVisible=ref(false);
//定义变量用来保存弹窗的标题
const dialogTitle=ref('新增职位');
//点击"新建用户"按钮，让弹窗出现且改标题
const beforeAddPost=()=>{
  dialogTitle.value="新增职位";
  dialogVisible.value=true;
}

//数据显示
//定义数组用来保存职位数据
const PostArr=ref([]);
//定义对象用来保存职位搜索条件
const searchPostForm=ref({name:'',status:''});

//定义加载部门数据的方法
const loadPost=async ()=>{
  // let data=qs.stringify(searchProjectForm.value);  //将对象转换为字符串
  const list = await loadPostApi(searchPostForm.value);
  PostArr.value = list;
  deptNoArr.value=PostArr.value.map(item=>item.deptNo);
  console.log(list);
};

//定义数组存储部门编号数据
const deptNoArr=ref([]);

/*//定义数组获取部门名数据
const deptNameArr=ref([]);
//定义数组存储过滤非空后的部门名数据
const deptNameFilterArr=ref([]);
//备选部门名数据*/
/*//定义获取部门名的方法
const loadDept=async ()=>{
  // let data=qs.stringify(searchProjectForm.value);  //将对象转换为字符串
  console.log("编号参数:"+deptNoArr.value);
  // 构建请求数据
  let data={deptNo:deptNoArr.value};
  console.log("请求数据:"+data);
  const list = await loadDeptApi(data)
  deptNameArr.value = list;
  console.log("部门名数组:"+deptNameArr.value);
  console.log(list);
};*/

//定义数组存储部门数据
const deptArr=ref([]);

//定义加载部门的方法
const loadDeptt=async ()=>{
  const list = await loadDepttApi();
  console.log(list);
  deptArr.value = list;
};
onMounted(loadPost);
onMounted(loadDeptt);

</script>